<template>
	<div class="box">
		<div class="container">
			<van-action-sheet @select="uploadImg" @close="showSheet = false" @cancel="showSheet = false"
				description="更换头像" :show="showSheet" :actions="typeArray" cancel-text="取消" />
			<!-- 以下是正常状态 -->
			<div class="content">
				<van-cell :border="false" @click="showSheet = true" :clickable="true" center class="first_child"
					title="头像">
					<div slot="right-icon">
						<div class="flex_center">
							<img class="avatar_default" :src="
                  mineInfo.avatar
                    ? mineInfo.avatar
                    : require('../../static/images/avatar_default.png')
                " alt="" />
							<van-icon class="arrow" name="arrow" />
						</div>
					</div>
				</van-cell>
				<van-cell @click="change('nickName')" :clickable="true" :border="false" center title="姓名" is-link
					:value="mineInfo.nickName">
				</van-cell>
				<van-cell @click="change('sex')" :clickable="true" :border="false" center title="性别" is-link
					:value="mineInfo.sex == 0 ? '男' : '女'">
				</van-cell>
				<van-cell @click="change('phoneNumber')" :clickable="true" :border="false" center title="账号(手机号)"
					is-link :value="mineInfo.phoneNumber">
				</van-cell>
				<van-cell v-for="(item, index) in schoolPostList" :key="index"  :border="false" center title="门店-岗位"
					:value="item">
				</van-cell>
			</div>
			<!-- <div class="postShopList">
				<div class="postShopItem" v-for="(item, index) in schoolPostList" :key="index">
					<div class="flex item">
						<div class="lable">门店-岗位</div>
						<div class="value">
							{{ item.schoolName }}-
							{{ item.postNames.join(",") }}
						</div>
						<div class="value">{{ item.schoolName }}</div>
					</div>
					<div class="flex item">
					<div class="lable">岗位:</div>

					</div>
				</div>
			</div> -->
			<div style="width: 100%; height: 110rpx"></div>
			<div class="fixed">
				<div class="primaryBtn" @click="change('password')">修改密码</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getUserProfile,
		updateUserProfile
	} from "@/common/api/mine.js";
	export default {
		name: "editMyInformation",
		data() {
			return {
				typeArray: [{
						name: "拍照",
						id: "1",
					},
					{
						name: "从相册里选择",
						id: "2",
					},
				],
				showSheet: false,

				mineInfo: {},
				schoolPostList: [],
				// 用于修改信息
				editForm: {
					name: "",
					sex: "",
					phoneNumber: "",
				},
				editStatus: false,
			};
		},
		onLoad() {
			console.log("onload");
			getUserProfile().then((res) => {
				this.mineInfo = res.data;
				const result = [];
				// 转换员工门店岗位数据格式 2024/1/16 杜
				res.schoolPostList.forEach(item => {
				  const schoolName = item.schoolName;
				  const postNames = item.postNames;
				  postNames.forEach(postName => {
				    result.push(`${schoolName}-${postName}`);
				  });
				});
				this.schoolPostList =result;
			});
		},
		onShow() {
			let that = this;
			uni.$on("returnData", function(data) {
				console.log("监听到事件来自返回的参数：", data);
				let params = {
					...that.mineInfo
				};
				if (data.type == "avatar") {
					params.avatar = data.value;
				} else if (data.type == "nickName") {
					params.nickName = data.value;
				} else if (data.type == "sex") {
					params.sex = data.value;
				} else if (data.type == "phoneNumber") {
					that.mineInfo.phoneNumber = data.value;
					uni.setStorageSync("userInfo", that.mineInfo);
					uni.showToast({
						icon: "success",
						title: "修改手机号成功",
					});
					return false;
				}
				updateUserProfile(params).then((res) => {
					switch (data.type) {
						case "avatar":
							that.mineInfo.avatar = data.value;
							uni.showToast({
								icon: "success",
								title: "修改头像成功",
							});
							break;
						case "nickName":
							that.mineInfo.nickName = data.value;
							uni.showToast({
								icon: "success",
								title: "修改姓名成功",
							});
							break;
						case "sex":
							that.mineInfo.sex = data.value;
							uni.showToast({
								icon: "success",
								title: "修改性别成功",
							});
					}
					uni.setStorageSync("userInfo", that.mineInfo);
				});
			});
		},
		methods: {
			/* 修改 type为类型 */
			change(type) {
				// 如果是修改密码则传手机号过去
				uni.navigateTo({
					url: `/pages_mine/mine/editInfo?type=${type}&value=${
          type == "password" ? this.mineInfo.phoneNumber : this.mineInfo[type]
        }`,
				});
			},
			navTo(phone) {
				uni.navigateTo({
					url: "/pages_mine/mine/changePhoneNumber?phone=" + phone,
				});
			},
			uploadImg(e) {
				console.log(e.detail.id);
				//e.detail.id==1  拍照  e.detail.id==2  从相册里选择
				if (e.detail.id == 1) {
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ["camera"], //拍照 camera album
						success: (res) => {
							uni.navigateTo({
								url: "/pages_mine/mine/avatarCut?imageSrc=" +
									encodeURIComponent(res.tempFilePaths[0]),
							});
						},
					});
				} else {
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ["album"], //从相册选择 camera album
						success: function(res) {
							uni.navigateTo({
								url: "/pages_mine/mine/avatarCut?imageSrc=" +
									encodeURIComponent(res.tempFilePaths[0]),
							});
						},
					});
				}
			},
		},
	};
</script>

<style scoped lang="scss">
	::v-deep .van-cell__title {
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #666666;
	}

	::v-deep .van-cell__value {
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.postShopList {
		width: 686rpx;
		margin: 0 auto 0 auto;

		.postShopItem {
			height: 86rpx;
			box-sizing: border-box;
			padding: 0 30rpx;
			line-height: 86rpx;
			background: white;
			// border-radius: 5rpx;
			// margin-bottom: 10px;
			border-bottom-left-radius: 32rpx;
			/*左下角为圆角*/
			border-bottom-right-radius: 32rpx;

			.item {
				// margin-bottom: 10rpx;
				font-size: 26rpx;
				justify-content: space-between;


				/*右下角为圆角*/
				.lable {
					color: #666666;
				}

				.value {
					margin-left: 5rpx;
					// width: 555rpx;
					color: #333333;
				}
			}
		}
	}

	.box {
		min-height: 100vh;
		width: 750rpx;
		box-sizing: border-box;
		background: #fafafa;
	}

	.container {
		min-height: 100vh;
		width: 750rpx;
		padding: 20rpx 32rpx 0;
		box-sizing: border-box;
		background: #fafafa;
	}

	.content {
		width: 686rpx;
		background: #ffffff;
		border-radius: 32rpx;
		padding: 20rpx 0;
		box-sizing: border-box;
	}

	::v-deep .first_child .van-cell {
		border-radius: 32rpx 32rpx 0 0;
		height: 128rpx;
	}

	::v-deep .last_child .van-cell {
		border-radius: 0 0 32rpx 32rpx;
	}

	::v-deep .van-cell {
		height: 96rpx;
	}

	.avatar_default {
		border-radius: 40rpx;
		width: 80rpx;
		height: 80rpx;
		margin-right: 24rpx;
	}

	.flex_center {
		display: flex;
		align-items: center;

		.arrow {
			font-size: 32rpx;
			color: #999999;
		}
	}

	.fixed {
		width: 100%;
		display: flex;
		justify-content: center;
		position: fixed;
		padding: 0 32rpx;
		box-sizing: border-box;
		bottom: env(safe-area-inset-bottom);
		left: 0;
	}

	.primaryBtn {
		background: #FFFFFF;
		width: 100%;
		height: 96rpx;
		// box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(0, 74, 88, 0.1);
		border-radius: 48rpx;
		text-align: center;
		line-height: 96rpx;

	}

	.disableBtn {
		@include btn_plain(#bbbbbb, #ffffff) {
			width: 100%;
			height: 96rpx;
			box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(0, 74, 88, 0.1);
			border-radius: 48rpx;
		}
	}
</style>